<!DOCTYPE html>
<html>
  <head>
    <title>Hello, world!</title>
    <script type="text/javascript" src="../../d3.js"></script>
  </head>
  <body>
    Your lucky numbers are:<br>
    <span></span>
    <script type="text/javascript">

var data = [4, 8, 15, 16, 23, 42];

d3.select("span")
  .selectAll("svg")
    .data(data)
  .enter().append("svg")
    .attr("width", 100)
    .attr("height", 100)
  .append("text")
    .attr("x", "50%")
    .attr("y", "50%")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .attr("fill", "white")
    .attr("stroke", "black")
    .attr("stroke-width", 1.5)
    .attr("cursor", "pointer")
    .style("font", "36pt Comic Sans MS")
    .style("text-shadow", "3px 3px 3px rgba(0,0,0,.4)")
    .text(function(d) { return d; })
    .on("click", click)
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);

function click(d, i) {
  console.log("click", d, i);
}

function mouseover(d, i) {
  d3.select(this)
      .attr("fill", "brown")
      .attr("stroke", "grey");
}

function mouseout(d, i) {
  d3.select(this)
      .attr("fill", "orange");
}

    </script>
  </body>
</html>
